<template>
  <!-- 开通vip -->
  <view>
    <view class="user-box">
      <view class="user-info">
        <view class="user-img">
          <image src="../../static/active-my.png" mode=""></image>
        </view>
        <view class="">
          <text>184****2365</text>
          <view class="">
            您还不是VIP客户
          </view>
        </view>
      </view>
    </view>
    <view class="tequan-title">VIP专属特权</view>
    <view class="quanyi-box">
      <view class="quanyi-title">
        <view class="">权益描述</view>
        <view class="">注册用户</view>
        <view class="">VIP用户</view>
      </view>
      <view class="quanyi-list">
        <text class="">模拟策略交易</text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
      </view>
      <view class="quanyi-list">
        <text class="">模拟策略交易</text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
      </view>
      <view class="quanyi-list">
        <text class="">模拟策略交易</text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
      </view>
      <view class="quanyi-list">
        <text class="">模拟策略交易</text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
        <text class=""><u-icon color="#0080ff" name="checkbox-mark"></u-icon></text>
      </view>
    </view>
    <view class="quanyi-text">
      *会员服务为虚拟服务，购买成功后立即生效，暂不支持退款，敬请谅解！
    </view>
    <view class="quanyi-text">
      *购买后如不能正常使用，请联系客服微信：Jone-LRH
    </view>
    <view class="bottom-btns">
      <view class="">兑换码</view>
      <view class="">
        <u-button type="primary" size="medium" @click="openvip">立即开通 298 VTN/月</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      // 开通vip详情页面
      openvip(){
        uni.navigateTo({
          url:'../openvipdetail/openvipdetail'
        })
      }
    }
  }
</script>

<style>
  page{
    background-color: #131a2a;
    color: #FFFFFF;
  }
    .user-box{
      position: relative;
      width: 100%;
      height: 200rpx;
      background-color: #1179fd;
    }
    .user-info{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: absolute;
      bottom: 0;
      width: 90%;
      height: 170rpx;
      background-color: #e0e6fe;
      margin: 0 5%;
      border-radius: 20rpx 20rpx 0 0;
      color: #007AFF;
      font-size: 32rpx;
    }
    .user-img{
      width: 100rpx;
      height: 100rpx;
      margin: 0 40rpx;
      overflow: hidden;
    }
    .user-img image{
      width: 100%;
      height: 100%;
    }
    .tequan-title{
      font-size: 36rpx;
      line-height: 120rpx;
      text-align: center;
    }
    .quanyi-box{
      background-color: #202b49;
      margin: 0 40rpx 40rpx;
      border-radius: 20rpx;
      overflow: hidden;
      font-size: 30rpx;
    }
    .quanyi-title{
      display: flex;
      justify-content: space-around;
      line-height: 80rpx;
      background-color: #fecc97;
      color: #804909;
    }
    .quanyi-list{
      display: flex;
      justify-content: space-around;
      line-height: 80rpx;
    }
    .quanyi-list text{
      width: 33.33%;
      text-align: center;
    }
    .quanyi-text{
      font-size: 24rpx;
      color: #9ca5c4;
      margin: 10rpx 40rpx;
      line-height: 36rpx;
    }
    .bottom-btns{
      position: fixed;
      bottom: 60rpx;
      font-size: 34rpx;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
</style>
